<template>
  <div class="list_container">
    <!-- <want-adopt-item></want-adopt-item>
    <want-adopt-item></want-adopt-item>
    <want-adopt-item></want-adopt-item>
    <want-adopt-item></want-adopt-item>
    <want-adopt-item></want-adopt-item>
    <want-adopt-item></want-adopt-item>
    <want-adopt-item></want-adopt-item>
    <want-adopt-item></want-adopt-item> -->
    <div v-for="(v,i) in petList"
         class="list_box"
         :key="i">
      <want-adopt-item v-on:toPetId="toPetId"
                       :toPet="petList[i]"></want-adopt-item>
    </div>
  </div>
</template>
<script>
export default {

  created () {
    this.getAllPetByCategoryId(this.categoryId)
  },
  data () {
    return {
      petList: [],
      categoryId: 1003
    }
  },
  methods: {
    // 根据分类id获取所有宠物信息
    async getAllPetByCategoryId (categoryId) {
      console.log(categoryId)
      // const { data: res } = await getAllPetByCategoryId(categoryId + '')
      const { data: res } = await this.$http.get('/pet/findPetByCategoryId/' + categoryId)
      console.log(res)
      if (res.code != 200)
        return;
      this.petList = res.data
    },
    // 获取到子组件的宠物id
    toPetId (petId) {
      console.log(petId)
      this.$emit('toPetId', petId);
    },
    //  toContactName (name) {
    //    console.log(name)
    //    this.$emit('toContactName', name);
    //  }
  },
  watch: {
    // 监听路由变化
    $route: {
      handler: function (val, oldVal) {
        this.getAllPetByCategoryId(this.categoryId)
      },
      // 深度观察监听
      deep: true
    }
  },

}
</script>
<style lang="less" scoped>
.list_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  //   text-align: center;
  //   background-color: yellow;
  padding-right: 100px;
  padding-left: 100px;
  .list_box {
    position: relative;
    //  text-align: center;
    width: 45%;
    //  background-color: violet;
  }
  //   .list_box {
  //     width: 50%;
  //     background-color: yellow;
  //     display: flex;
  //     flex-wrap: wrap;
  //     justify-content: space-around;
  //     padding: 6px;
  //   }
}
</style>